<template>
  <tr>
      <td class="check"><input class="check" type="checkbox"></td>
      <td class="status">
            <span class="state" v-show="appeal.status == 0">未审核</span>
            <span class="state" v-show="appeal.status == 1">已通过</span>
            <span class="state" v-show="appeal.status == 2">未通过</span>
      </td>
      <td class="type">
          <span>{{appeal.time}}</span>
      </td>
      <td class="name">
          <span>{{appeal.reportNickName}}</span>
      </td>
      <td class="person"> 
          <span>{{appeal.reportedNickName}}</span>
      </td>
      <td class="text">
          <span>{{appeal.reason}}</span>
      </td>
      <td class="do">
          <button class="deleteUser">注销</button>
          <button class="audite" v-show="appeal.status==0" @click="examine()">审核</button>
      </td>
  </tr>
</template>

<script>
export default {
    name: 'AppealItem',
    props:['appeal'],
    methods:{
        examine(){
            this.$store.state.dialog = 2;
            this.$store.state.appealAdmin = this.appeal
        }
    }
}
</script>

<style lang="less" scoped>
*{
    box-sizing: border-box;
}
.check,.status{
    width: 40px;
}
tr{
    background-color: #f9f9f9;
    a{
        color: #337ab7;
    }
    .type,.name,.message{
        width: 8%;
    }
    .do{
        width: 15%;
    }
    .photo{
        width: 38%;
    }
    .person{
        width: 10%;
    }
    .text{
        width: 30%;
    }
}
td{
    padding:4px;
    font-size: 16px;
    vertical-align: middle;
    text-align: center;
    span{
        display: inline-block;
        // width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
        text-align: center;
        img{
            height: 120px;
            margin: 0 2px;
        }
    }
    .photoSpan{
        border-radius: 10px;
        padding: 0;
    }
    input{
        text-overflow: ellipsis;
    }
    button{
        border: 1px solid;
        border-radius: 2px;
        margin-right: 5px;
        font-size: 12px;
        padding: 4px 10px;
        cursor: pointer;
    }
    .deleteUser{
        color: #ff9292;
        background-color: #ffeded;
        border-color: #ffdbdb;
    }
    .audite{
        color: #ffba00;
        background: #fff8e6;
        border-color: #ffe399;
    }
}
</style>